﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>6-5 toRef 以及 context 参数2</title>
    <link rel="stylesheet" href="../../css/bootstrap.css"/>
    <script src="../../js/jquery-2.2.0.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
</head>
<body>
<h1>6-5 toRef 以及 context 参数2</h1>

<div id="app">
</div>
<script src="../../js/vue-3.2.26.js"></script>
<script src="../../node_modules/axios/dist/axios.js"></script>
<script src="../../node_modules/lodash/lodash.js"></script>

<script>

    // 引了vue.js会存在一个Vue的全局变量
    const app = Vue.createApp({
        /**
         * CompositionAPI 中 setup函数在created之前，所以在这个函数中的内容没有this
         * method里可以调setup中的方法和使用里面的数据，原因就是它在create之前执行的
         */

        template:`
            <child app="我是父组件传递过来的数据">
                <div>
                    <p>我是插槽里的p标签</p>
                    <span>我是插槽里的span标签</span>
                </div>
            </child>
        `,

        setup(props,context){
            return {
            }
        }
    });
    app.component('child',{
        template:`
            <div>child</div>
        `,
        setup(props,context){
            const {h} = Vue;
            const { attrs,slots,emit } = context;
            // 它是一个none-props  正常情况下咱们需要从props属性里取，也是那个跟setup同级的props,然后写默认的那个
            //none-props可以不写那个默认，也可以取，如果没传属性过来就什么也没有是undefined，如果父组件传递了，则可以通过attrs.属性的方式取到以前props里的数据
            console.log(attrs.app);

            // child子组件默认内容就是一个纯文本child，当父组件通过插槽的方式传递了一个div过来以后,则显示传递过来的标签内容
            // 可以通过slots.default()接收，这个数据是一具vdom也就是虚拟dom
            // 以前vue2.0的时候获取slots是通过  this.$slots的方式获取
            // h 函数是Vue里提供的，第一个参数是标签名，第二个属性，第三个就是vdom了
            return ()=> h('div',{},slots.default());
        }
    });
    const vm = app.mount('#app');

</script>

</body>
</html>
